<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>{$activity.name}</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="msapplication-tap-highlight" content="no">
		<meta content="telephone=no" name="format-detection">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/Static/css/simcss.css" />
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/Static/css/buttons.css" />
		<script src="__PUBLIC__/Static/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="__PUBLIC__/Static/js/simapp.js" type="text/javascript" charset="utf-8"></script>
		<script src="__PUBLIC__/Static/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var userInfo = {: json_encode($userInfo)
			};
			var activity = {: json_encode($activity)
			};
			var hostInfo = {: json_encode($hostInfo)
			};
		</script>
		<style type="text/css">
			body {
				background: #c03;
			}
			.rich-bg {
				min-height: 100%;
			}
			.rich-topbar img {
				width: 100%;
			}
			.rich-name{
				font-size: 22px;
				color: #fff;
				padding: 10px;
			}
			.rich-prize-name{
				font-size: 16px;
				color: #fff;
			}
			.rich-prize-name span{
				color: #ff0;
			}
			.rich-prize-pic {
				padding: 10px;
			}
			.rich-prize-pic img {
				border-radius: 50%;
				max-width: 100%;
			}
			.rich-prize-pic-box{
				padding: 5px;
				border-radius: 50%;
				border: #c03 solid 1px;
				display: inline-block;
				background: #fff;
			}
			.rich-action {
				padding: 10px 20px;
			}
			.rich-action .button {
				margin: 10px 0;
			}
			.rich-info {
				text-align: left;
				border-radius: 5px;
				background: #fff;
				padding: 10px;
			}
			.rich-info span {
				color: #87318C;
				font-weight: bold;
			}
			.rich-process {
				margin: 0 20px 20px;
				background: #fff;
				color: #494949;
				border-radius: 5px;
				padding: 10px;
				text-align: left;
			}
			.rich-process h3 {
				color: #87318C;
				border-bottom: #87318C dashed 1px;
				margin: 0;
				padding: 3px 0;
				font-size: 18px;
			}
			.rich-process h3 span{
				float: right;
				font-size: 80%;
			}
			.rich-process li {
				margin-left: -10px;
			}
			
			#rich-detail span{
				float: right;
			}
			#rich-detail p, #rich-detail ol{
				display: none;
			}
			#rich-rule{
				overflow: hidden;
			}
			.max-height{
				max-height: 164px;
			}
			.rich-register{
				display: none;
			}
			.rich-register form input{
				display: block;
				width: 100%;
				box-sizing: border-box;
				margin: 3px 0;
				border-radius: 3px;
				border: #005065 solid 1px;
				padding: 5px;
			}
			.footer{
				margin: 10px;
			}
		</style>
	</head>

	<body>

		<div class="wrapper rich-bg">
			<div class="rich-topbar">
				<img src="__STYLE__/RedPaper/title.png" />
			</div>
			<div class="rich-main">
				<div class="rich-name">{$activity.name}</div>
				<div class="rich-prize-name">活动奖品：<span>{$activity.prizeName}</span>
				</div>
				<div class="rich-prize-name">奖品数量：<span>{$activity.prizeShowCount}</span>
				</div>
				<div class="rich-prize-name">奖品价值：<span>{$activity.prizePrice}</span> 元</div>

				{__CONTENT__}

				<div class="rich-process">
					<h3>活动流程</h3>
					<ol>
						<li>关注公众账号，领取初始红包<span>{$activity.defaultMoney}</span>元</li>
						<li>发起活动，建立活动账号</li>
						<li>邀请朋友，帮我抽奖</li>
						<li>攒够红包数额，领取红包</li>
					</ol>
				</div>
				<div id="rich-rule" class="rich-process max-height">
					<h3><span>点击显示全部</span>活动规则</h3> {$activity.rule}
				</div>
			</div>
			<div class="footer">
				<p>{$system.bottom}</p>
			</div>
		</div>

		<script src="__PUBLIC__/Static/js/wechat.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				// 规则高度显示
				$('#rich-rule').click(function() {
					$(this).toggleClass('max-height');
				})
			});
		</script>
		<!-- 微信分享开始 -->
		<script type="text/javascript">
		    // 分享内容
            var data = {
                imgUrl: activity.pic,
                link: activity.shareUrl,
                desc: activity.description,
                title: activity.name
            };

            if (hostInfo && activity.playUrl) {
                data.link = activity.playUrl;
                data.desc = "我还差 {$hostInfo.diff} 元就能赢取 {$activity.prizeName} 了，快来帮我吧！";
            }
            
			wx.config({
				debug: false,
				appId: '{$wxConfig.appId}',
				timestamp: "{$wxConfig.timestamp}",
				nonceStr: '{$wxConfig.nonceStr}',
				signature: '{$wxConfig.signature}',
				jsApiList: [
					'checkJsApi',
					'onMenuShareTimeline',
					'onMenuShareAppMessage'
				]
			});
			wx.ready(function() {
				wx.onMenuShareAppMessage({
					link: data.link,
					title: data.title,
					desc: data.desc,
					imgUrl: data.imgUrl
				})
				wx.onMenuShareTimeline({
					link: data.link,
					title: data.desc + ' - ' + data.title,
					imgUrl: data.imgUrl
				})
			});
		</script>
		<!-- 微信分享结束 -->
	</body>

</html>